<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动场景1：图片与文字环绕</title>
		<style>
			img{
				/* 图片脱离文档流--文字包含在图片周边 */
				float: left ;
				margin-right: 50px;/* 图片与文字链接处间隙 */
				margin-bottom: 50px;/* 图片与文字链接处间隙 */
			}
			p{
				font-size: 16px ;/* 页面默认字体尺寸 */
				line-height: 20px;/*浮动字体，行高无法设定*/
				word-spacing: 20px ;
			}
		</style>
	</head>
	<body>
		<h1>浮动之图片文字环绕</h1>
		<img src="img/哪吒3.png" alt="哪吒3" width="250px" height="250px" />
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi rerum, culpa aliquid voluptatem cupiditate voluptatum eius veniam deserunt molestias itaque ipsa, ut natus dolores ea distinctio obcaecati harum ratione. Voluptate.Lorem ipsum dolor sit amet consectetur adipisicing elit. Et ab dolorem veniam dignissimos commodi maxime deleniti similique delectus, quidem, aspernatur, quas praesentium magnam autem ducimus! Deleniti, ea. In, velit cupiditate?Lorem, ipsum dolor sit amet consectetur adipisicing elit. Excepturi commodi exercitationem animi. Natus iure nobis iste libero inventore placeat quia, modi ipsa cumque impedit itaque nulla, laboriosam sunt repellat fugit.Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus harum, id reiciendis aliquam cumque ducimus officia. Illo iste, asperiores cumque distinctio nisi placeat repellat quas debitis? Dolorum vero magnam atque!lLorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ducimus soluta temporibus sint cum commodi minus asperiores delectus dolore adipisci, ea natus neque omnis magni quia maiores nam sequi exercitationem?</p>
		
		
	</body>
</html>